作者：ccer | 来源：互联网 | 2023-09-25 23:50
篇首语：本文由编程笔记#小编为大家整理，主要介绍了前端例程20220815：拟物风格复选按钮相关的知识，希望对你有一定的参考价值。
演示
原理
本文要实现的按钮大致示意如下&＃xff1a;
观察者从正上方观看&＃xff0c;写代码时主要处理光照以及近大远小等现象。
代码
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1, user-scalable&＃61;no">
<title>拟物风格复选按钮title>
<style>
*
padding: 0;
margin: 0;
user-select: none;
html,
body
height: 100vh;
style>
<style>
body
display: flex;
background-color: #181818;
align-items: center;
justify-content: center;
.chk
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: #000000;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
.chk>input
appearance: none;
.chk>span
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #222222;
box-shadow: 0 2px 8px rgba(0, 0, 0, 1),
inset 0 -2px 4px rgba(0, 0, 0, 1),
inset 0 2px 4px rgba(255, 255, 255, 0.5);
transition: 0.2s;
.chk>input:checked~span
box-shadow: 0 1px 4px rgba(0, 0, 0, 1),
inset 0 -1px 2px rgba(0, 0, 0, 1),
inset 0 1px 2px rgba(255, 255, 255, 0.5);
transform: scale(0.95);
transition: 0.2s;
.chk>svg
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
stroke: #111111;
stroke-width: 6px;
stroke-linecap: round;
transition: 0.2s;
transition-delay: 0.1s;
.chk>input:checked~svg
stroke: #00ffff;
filter: drop-shadow(0 0 12px #00ffff);
transform: scale(0.95);
transition: 0.2s;
transition-delay: 0.1s;
style>
head>
<body>
<label class&＃61;"chk">
<input type&＃61;"checkbox">
<span>span>
<svg id&＃61;"btn-more" viewBox&＃61;"0 0 100 100">
<line x1&＃61;"50" y1&＃61;"25" x2&＃61;"50" y2&＃61;"50" />
<circle cx&＃61;"8" cy&＃61;"70" r&＃61;"20" fill&＃61;"none" stroke-dasharray&＃61;"90" transform&＃61;"rotate(-39)" />
svg>
label>
body>
html>
京公网安备 11010802041100号